<template>
  <div class="chartAttr">
    <div class="itemBox">
      <div class="label">信息：</div>
      <div class="item" >
        <div class="infoCon" v-for="(item,idx) in dataAttr.value.newsData" :key="idx">
          <el-input v-model="item.text" clearable></el-input>
          <i v-if="idx==0" class="el-icon-circle-plus add" @click="addNews"></i>
          <i v-else class="el-icon-remove del" @click="reduceNews(idx)"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['attrData'],
  computed: {},
  data () {
    return {
      dataAttr:this.attrData,
    }
  },
  watch: {},
  created () {},
  mounted () {},
  methods: {
    // 增加新闻
    addNews(){
      this.dataAttr.value.newsData.push({text:''});
    },
    // 减少新闻
    reduceNews(idx){
      this.dataAttr.value.newsData.splice(idx,1);
    }
  },
}
</script>

<style lang="less" scoped>
.chartAttr {
  width: 100%;
  height: 100%;
  margin: 10px 0px;
  .itemBox{
    display: flex;
    padding: 10px;
    border-bottom: 1px dashed #dbdbdb;
    .label{
      width: 50px;
      height: 40px;
      line-height: 40px;
    }
    .item{
      width: calc(100% - 50px);
    }
    .infoCon{
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    .add{
      margin: 0 10px;
      color: #5CB6FF;
      font-size: 24px;
    }
    .del{
      margin: 0 10px;
      color: #F56C6C;
      font-size: 24px;
    }
  }
}
</style>